<template>
  <div class="off-box">
    <div class="off-content">
      <div class="avatar">
        <img :src="sysInfo.icon" alt=""/>
      </div>
      <div class="nike">{{sysInfo.name}}</div>
      <div class="end-tip">直播已结束</div>
      <div class="off-time">
        <div class="end">
          <p class="time" v-text="endTime"></p>
          <p class="text">结束时间</p>
        </div>
        <div class="bar"></div>
        <div class="duration">
          <p class="time" v-text="durTime">00:30:46</p>
          <p class="text">直播时长</p>
        </div>
      </div>
      <div class="video-make" v-if="videoMake">回放视频正在生成中，请稍后再来...</div>
      <div class="btn" @click="back">返回首页</div>
    </div>
  </div>
</template>
<script>
import fun from "../../../util/function";
import config from "../../../config"

export default {
  props: {
    roomInfo: Object,
    videoMakeTip: Boolean,
  },
  data() {
    return {
      sysInfo: this.$store.state.SysOrgInfo,
      roomInfo: this.roomInfo,
      videoMake: this.videoMakeTip,
      endTime: '',//结束时间
      durTime: ''//直播总时长
    }
  },
  created () {
    this.endTime = this.roomInfo.closeTime !=null ? this.roomInfo.closeTime.substring(5,16) : '00-00 00:00';
    this.durTime = fun.getDateDiff(this.roomInfo.startTime,this.roomInfo.closeTime == null ? this.roomInfo.startTime:this.roomInfo.closeTime);
  },
  methods: {
    back() {
      let channel = this.$channel
      if(channel =='gszq' && window.terminal.isGszqApp){ //国盛证券 关闭webview
          fun.gszqGoBack()
          return
      }
      if (config.look_channel[channel]) {
        this.$router.push({
          path: `/${channel}/${config.look_channel[channel]}`
        });
      }else {
        this.$router.push({
          path: `/${channel}/home`
        });
      }
    }
  },
};
</script>
<style scoped>
.off-box {
  width: 100vw;
  height: 100vh;
  background: url("../../../assets/images/off-bg.png") no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

.off-content {
  padding-top: 14%;
}


.avatar img {
  display: block;
  margin: 0 auto;
  width: 125px;
  height: 125px;
  border-radius: 50%;
}

.nike {
  font-size: 30px;
  font-weight: 500;
  color: #79828E;
  line-height: 40px;
  text-align: center;
  margin-top: 28px;
}

.end-tip {
  font-size: 44px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 60px;
  text-align: center;
  margin-top: 112px;
}

.off-time {
  width: 630px;
  padding: 50px 50px;
  background: #221D38;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  margin: 124px auto 0;
}

.end,.duration {
  width: 260px;
}

.time {
  font-size: 32px;
  font-family: DIN;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 40px;
  text-align: center;
}

.text {
  font-size: 24px;
  font-weight: 500;
  color: #79828E;
  line-height: 40px;
  text-align: center;
  margin-top: 14px;
}

.bar {
  width: 1px;
  height: 83px;
  background: #FFFFFF;
}

.m-l-10 {
  margin-left: 10px;
}

.video-make {
  width: 435px;
  height: 80px;
  background: #000000;
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 80px;
  text-align: center;
  position: absolute;
  bottom: 19%;
  left: 50%;
  margin-left: -217.5px;
}

.btn {
  width: 600px;
  height: 90px;
  background: #FE4C52;
  border-radius: 45px;
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  line-height: 90px;
  text-align: center;
  position: absolute;
  bottom: 6%;
  left: 50%;
  margin-left: -300px;
}
</style>
